import { LoadingOutlined } from '@ant-design/icons-vue'
import { defineComponent } from '@vue/runtime-core'
import { Transition } from '@vue/runtime-dom'

export default defineComponent({
    props: {
        visible: Boolean
    },
    render(props){
        return <Transition name="fade" appear>
            { props.visible && (
            <div style={{
                position: 'absolute',
                width: '100%',
                height: '100%',
                background: 'rgba(255, 255, 255, .9)',
                top: 0,
                left: 0,
            }}>
                <div style={{
                    position: 'absolute',
                    top: '50%',
                    left: '50%',
                    transform: 'translate(-50%, -50%)',
                }}>
                    <a-spin indicator={<LoadingOutlined style={{fontSize: '24px'}} spin />}></a-spin>
                </div> 
            </div>) || null }
        </Transition>
    }
})